@import "mixin";

/*text-align*/
.tx-l { text-align: left; }
.tx-c { text-align: center; }
.tx-r { text-align: right; }
.tx-dt{ text-decoration: line-through; }


/*word-break*/
.wb{
  word-wrap: break-word;
  word-break: break-all;
}


/*float*/
.fl{ float: left; }
.fr{ float: right; }
.clear { overflow: hidden; }


/*overflow*/
.of{ overflow: hidden; }
.of-y-a {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.of-x-a {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}


/*display*/
.bs{ box-sizing: border-box; }
.db{ display: block; }
.dib{ display: inline-block; }
.df{ display: flex; }
.dn{ display: none; }


/*flex*/
.df-c{
  display: flex;
  justify-content: center;
  align-items: center;
}
.df-col {
  display: flex;
  flex-direction: column;
}
.df-l{
  justify-content: flex-start;
  align-items: center;
}
.df-r{
  justify-content: flex-end;
  align-items: center;
}
.dforder{
  flex-wrap:wrap;
  justify-content: flex-start;
  align-items: center;
  align-content:center;
}

/**
.df1 {flex: 1}
 */
@for $i from 1 through 10 {
  .df#{$i} { flex: $i; }
}
.df1 {
  min-width: 0;
}


/*字体*/
/**
.fs14 {font-size: 28rpx}
 */
@for $i from 8 through 32 {
  .fs#{$i} { font-size: $i * 2rpx; }
}
.fb {
  font-weight: bold;
}


/* 高度 和 行高 */
@include getHeightClass(16);  //  得到 .h16 { height: 32rpx }  .lh16 { line-height: 32rpx}
@include getHeightClass(100, '%', p);
@include getHeightClass(60);
@include getHeightClass(50);
@include getHeightClass(40);
@include getHeightClass(80);
@include getHeightClass(44);
@include getHeightClass(26);
@include getHeightClass(20);
@include getHeightClass(100);
@include getHeightClass(12);

/* 宽度 */
@include getWidthClass(100);  //  .w100 { width: 400rpx; }
@include getWidthClass(100, '%', p);  //  .w100p { width: 100%; }
@include getWidthClass(60);
@include getWidthClass(50);
@include getWidthClass(80);
@include getWidthClass(40);
@include getWidthClass(26);
@include getWidthClass(20);
@include getWidthClass(16);
@include getWidthClass(12);

/*行高*/
@include getLineHeightClass(12, 'rpx');      //  .lh12 {line-height: 124rpx}
@include getLineHeightClass((1 2), null);   //  .lh1p2 {line-height: 1.2}


/*margin*/
@include getMargin(5);
@include getMargin(10);
@include getMargin(12);
@include getMargin(15);
@include getMargin(20);

/*padding*/
@include getPadding(5);
@include getPadding(10);
@include getPadding(12);
@include getPadding(30);
@include getPadding(15);
@include getPadding(20);


/*1px边框*/
.ub_1px {
  @include getBorder($borderColor);
}
.ubt_1px {
  @include getBorderTop($borderColor);
}
.ubb_1px {
  @include getBorderBottom($borderColor);
}
.ubl_1px {
  @include getBorderLeft($borderColor);
}
.ubr_1px {
  @include getBorderRight($borderColor);
}
/* 边框 */
.ub2 {
  border: 2rpx solid $borderColor;
}


/*圆角*/
@include getBorderRadius(4);
@include getBorderRadius(6);
@include getBorderRadius(8);
@include getBorderRadius(100, '%', p);  //  只得到 .br100p {border-radius: 100%;}


/*颜色*/
.cFFF{color: #FFFFFF;}
.c333{color: #333333;}
.c666{color: #666666}
.c888{color: #888888}
.c999{color: #999999}
.cCCC{color: #cccccc}
.cAAA{color: #aaaaaa}
.cOrange {color: $orangeColor;}
.bcFFF{background-color: #FFFFFF;}
.bc4E{background-color: #4e4e4e;}
.bcE7{background-color: #e7e7e7;}
.bcF4{background-color: #f4f4f4;}
.bcCCC{background-color: #cccccc}
.bcF5{background-color: #f5f5f5}
.bcEEE{background-color: #eeeeee}
.bc888{background-color: #888888}


/*多行显示……*/
@include getLineClamp(2)
@include getLineClamp(3)
/*单行显示...*/
.dot {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}


/* 主题色系列 */
.theme-color {color: $themeColor;}
.theme-bc {background-color: $themeColor;}
.theme-ub_1px {border: 1px solid $themeColor;}
.theme-ubb_1px {border-bottom: 1px solid $themeColor;}
.theme-ubt_1px {border-top: 1px solid $themeColor;}
.theme-ubl_1px {border-left: 1px solid $themeColor;}
.theme-ubr_1px {border-right: 1px solid $themeColor;}

.left-arrow {
  display: inline-block;
  width: 16rpx;
  height: 16rpx;
  margin-right: 5rpx;
  border: 4rpx solid #ffffff;
  border-top-width: 0;
  border-right-width: 0;
  transform: rotate(45deg);
}


//  垂直水平居中
.vh-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 三角 */
$traingleColor: #666666;
$traingleWidth: 3px;
.down-triangle {
  display: inline-block;
  border-top: $traingleWidth solid $traingleColor;
  border-left: $traingleWidth solid transparent;
  border-right: $traingleWidth solid transparent;
}

.input-placeholder {
  color: #cccccc;
}
.textarea-placeholder {
  color: #cccccc;
}


@mixin arrow() {
  width: 20rpx;
  height: 20rpx;
  vertical-align: middle;
  transform: rotateZ(45deg);
}
//  箭头
.right-arrow {
  @include arrow();
  border-top: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
}
.green-right-arrow {
  @include arrow();
  border-top: 2px solid #9EDC6C;
  border-right: 2px solid #9EDC6C;
}


